<template>
<div class="content">
    <div class="info-box">
        <div class="steps-box">
            <el-steps :active="5" finish-status="success" align-center>
                <el-step title="基本信息"></el-step>
                <el-step title="品类/尺寸"></el-step>
                <el-step title="盒型"></el-step>
                <el-step title="色系"></el-step>
                <el-step title="包装体现"></el-step>
                <el-step title="工艺"></el-step>
            </el-steps>
        </div>
        

        <el-form ref="form" :model="prodictInfo" label-width="80px" :rules="regRules">
            <el-form-item label="特殊工艺" class="special"  prop="specialProcess">
                <span>特殊工艺会产生一定费用，详情咨询业务报价</span>
                <el-radio-group v-model="prodictInfo.specialProcess">  
                    <el-radio  :label="item.dictValue" v-for="(item,index) in specialProcessData" :key="index" class="option-content">
                        <div v-if="item.imgPath" >
                            <img  :src="basePath + item.imgPath" class="option-image" />
                            <p class="option-text">{{ item.dictLabel }}</p>
                        </div>
                        <div v-else>
                            {{ item.dictLabel }}
                        </div>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="生产工艺" prop="productionProcess">
                <el-radio-group v-model="prodictInfo.productionProcess">

                    <el-radio  :label="item.dictValue" v-for="(item,index) in productionProcessData" :key="index" class="option-content">
                        <div v-if="item.imgPath" >
                            <img  :src="basePath + item.imgPath" class="option-image" />
                            <p class="option-text">{{ item.dictLabel }}</p>
                        </div>
                        <div v-else>
                            {{ item.dictLabel }}
                        </div>
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="button-box">
            <el-button type="primary" @click="sumbit">提交</el-button>
        </div>
    </div> 
</div>
</template>

<script>
import { getDicts } from "@/api/design/dict/data"
import { addInfo } from "@/api/design/info/info"
export default {
    data() {
        return {
			productDictVo:{
				list:[],
				parentId:null
			},
            specialProcessData:[],
            productionProcessData:[],
            prodictInfo:{
				userName:"",
				sex:"",
				age:"",
				solarFilm:"",
				solarFilmSize:"",
				colorChangeFilm:"",
				colorChangeFilmSize:"",
				lacquerFilm:"",
				lacquerFilmSize:"",
				boxType:"",
				color:"",
				colorCustomize:"",
				colorProportion:"",
				colorProportionCustomize:"",
				style:"",
				styleCustomize:"",
				packagingReflectsList:[]		
			},
            basePath:process.env.VUE_APP_BASE_API,
            regRules:{
                specialProcess: [{ required: true, message: '请选择一种特殊工艺', trigger: 'change' }],
                productionProcess: [{ required: true, message: '请选择一种生产工艺', trigger: 'change' }],
            }
        }
    },
    methods: {
        sumbit(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    addInfo(this.prodictInfo).then(res => {
						console.log(8080,this.prodictInfo)
                        if(res.code === 200){
                            this.$router.push("/finish")
                        }
                    })
                }
            })
        }
    },
    created() {
        this.prodictInfo.userName = this.$route.query.userName
        this.prodictInfo.sex = this.$route.query.sex
        this.prodictInfo.age = this.$route.query.age
        this.prodictInfo.solarFilm = this.$route.query.solarFilm
        this.prodictInfo.solarFilmSize = this.$route.query.solarFilmSize
        this.prodictInfo.colorChangeFilm = this.$route.query.colorChangeFilm
        this.prodictInfo.colorChangeFilmSize = this.$route.query.colorChangeFilmSize
        this.prodictInfo.lacquerFilm = this.$route.query.lacquerFilm
        this.prodictInfo.lacquerFilmSize = this.$route.query.lacquerFilmSize
        this.prodictInfo.boxType = this.$route.query.boxType
        this.prodictInfo.color = this.$route.query.color
        this.prodictInfo.colorCustomize = this.$route.query.colorCustomize
        this.prodictInfo.colorProportion = this.$route.query.colorProportion
        this.prodictInfo.colorProportionCustomize = this.$route.query.colorProportionCustomize
        this.prodictInfo.style = this.$route.query.style
        this.prodictInfo.styleCustomize = this.$route.query.styleCustomize
        this.prodictInfo.packagingReflectsList = this.$route.query.packagingReflectsList
		this.productDictVo.list.push("special_process","production_process")
		this.productDictVo.parentId=0
		console.log(2020,this.prodictInfo.packagingReflectsList)
        getDicts(this.productDictVo).then(res => {
            this.specialProcessData = res.data.filter(item => item.dictType === "special_process");  // 返回比较结果;
			this.productionProcessData = res.data.filter(item => item.dictType === "production_process");  // 返回比较结果;	
        })
        // getDicts('production_process').then(res => {
        //     this.productionProcessData = res.data
        // })
    },
}
</script>

<style scoped>
.content{
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
.info-box{
    margin-top: 20px;
}
.steps-box{
    margin-bottom: 50px;
}
::v-deep .el-step__title{
    font-size: 14px;
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.button-box{
    display: flex;
    justify-content: center;
    margin-top: 10%;
}

.option-content {
  text-align: center;
}

.option-image {
  width: 70px;
  height: 70px;
}

.option-text {
  margin-top: 10px;
}

::v-deep .el-radio__inner {
    display: none;
}
</style>